<template>
  <!-- 嵌套饼图 -->
  <div :id="chartId" class="chart"></div>
</template>

<script>
import {mapState} from 'vuex'
import Ecolors from '@/utils/chartColors'
import {hexToRgba, resize, toolboxFullScreen} from '@/utils/utils'
export default {
  mixins: [resize],
  props: {
    chartId: {
      type: String
    },
    chartData: {
    }
  },
  data() {
    return {
      chart: null,
      colors: [],
    }
  },
  computed: {
    ...mapState(['curChartConfig'])
  },
  methods: {
    getCurChartConfig() {
      if (Object.keys(this.curChartConfig).length > 0) {
        let colors = []
        this.curChartConfig.colors.forEach(v => {
          colors.push(v.color)
        })
        this.colors = [...colors, ...Ecolors.color]
        let graphType = this.curChartConfig.graphType
        if (this.curChartConfig.graphType === 'bar1') {
          graphType = 'bar'
        } else if (this.curChartConfig.graphType === 'bar2') {
          graphType = 'bar'
        } else if (this.curChartConfig.graphType === 'pie1') {
          graphType = 'pie'
        }
        this.graphType = graphType
      }
      if (Object.keys(this.chartData).length > 0) {
        this.init()
      }
    },
    getSeriesData() {
      let seriesData = []
      let newChartData = JSON.parse(JSON.stringify(this.chartData))
      let d1 = []
      let d2 = []
      
      if (newChartData.length === 3) {
        newChartData.splice(0, 1)
      }
      // 处理数据为饼图数据
      if (this.graphType === 'pie') {
        for (let i=1; i<this.chartData[0].length; i++) {
          d1.push({ name: this.chartData[0][i], value: this.chartData[1][i]})
          d2.push({ name: this.chartData[0][i], value: this.chartData[2][i]})
        }
      }
      for (let i=0;i<newChartData.length;i++) {
        let obj = {
          type: this.graphType,
          symbol: 'circle',
          symbolSize: '8',
          connectNulls: true,
          smooth: true,
          scale: true
        }
        if (this.graphType === 'pie') {
          obj = {
            ...obj,
            name: newChartData[i][0],
            radius: i == 0 ? ['30%', '50%'] : ['55%', '75%'],
            center: ['50%', '45%'],
            label: {
              show: i == 0 ? false : true
            },
            labelLine: {
              show: i == 0 ? false : true
            },
            minShowLabelAngle: 4,
            data: i == 0 ? d1 : d2
          }
        } else {
          obj = {
            ...obj,
            seriesLayoutBy: 'row',
            barMaxWidth: 16,
            itemStyle: {
              color: this.colors[i]
            },
          }
        }
        seriesData.push(obj)
      }
      return seriesData
    },
    init() {
      let seriesData = this.getSeriesData()
      // 图例
      let legend = {
        type: 'plain',
        show: this.curChartConfig['showLegend'],
        left: '4%',
        right: '4%',
        top: 'bottom',
        icon: 'circle',
        textStyle: {
          color: '#6b6c7e'
        }
      }
      // 轴线
      let xAxisLine = {
        lineStyle: {
          color: this.curChartConfig['axisLine'].checked ? this.curChartConfig['axisLine'].color : '#f0f1f3',
          width: 2,
          type: this.curChartConfig['axisLine'].checked ? this.curChartConfig['axisLine'].type : 'solid'
        }
      }
      // x轴分隔线
      let xSplitLine = {
        show: this.curChartConfig['xGridLine'].checked,
        lineStyle: {
          color: this.curChartConfig['xGridLine'].color || '#f0f1f3',
          type: this.curChartConfig['xGridLine'].type
        }
      }
      // y轴分隔线
      let ySplitLine = {
        show: this.curChartConfig['yGridLine'].checked,
        lineStyle: {
          color: this.curChartConfig['yGridLine'].color || '#f0f1f3',
          type: this.curChartConfig['yGridLine'].type
        }
      }
      // 背景色
      let backgroundColor =  this.curChartConfig['showBgColor'].checked ? this.curChartConfig['showBgColor'].color :'#fff'
      let option = {
        tooltip: {
          confine: true,
          show: true,
          trigger: this.graphType === 'pie' ? 'item' : 'axis',
          backgroundColor: "#fff",
          extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
          borderRadius: 0,
          padding: 5,
          textStyle: {
            color: "#000"
          },
        },
        // 图例
        legend,
        backgroundColor,
        dataset: {
          source: this.chartData
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          // 分隔线
          splitLine: xSplitLine,
          // 轴线
          axisLine: xAxisLine,
          axisLabel: {
            textStyle: {
              color: "#666666"
            }
          },
        },
        yAxis: {
          type: 'value',
          minInterval: 1,
          // 分隔线
          splitLine: ySplitLine,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#f0f1f3",
              width: 2
            }
          },
          axisLabel: {
            textStyle: {
              color: "#666666"
            }
          }
        },
        series: seriesData
      }
      if (this.graphType !== 'pie') {
        option.tooltip.trigger = 'axis'
        option.color = this.colors
        option.grid = {
          top: "5%",
          right: "5%",
          // bottom: "20%",
          left: "6%",
        }
      } else {
        option.tooltip.trigger = 'item'
        option.color = this.colors
        option.xAxis.show = false
        option.yAxis.show = false
      }
      this.chart.clear();
      this.chart.setOption(option, true);
      this.$emit('chartDom', this.chart);

      // 后台报告下载
      this.chart.on('finished', () => {
        let tempId = this.$route.query.tempId
        if (tempId) {
          this.getEchartImg(this.chart.getDataURL())
        }
      })
    },
    getEchartImg(base) {
      window.echartImg = base
    }
  },
  watch: {
    curChartConfig: {
      deep: true,
      handler: function() {
        this.getCurChartConfig()
      }
    },
    chartData() {
      if (Object.keys(this.chartData).length <= 0) {
        if (this.chart) this.chart.clear()
      } else {
        this.getCurChartConfig()
      }
    }
  },
  mounted() {
    this.chart = this.$echarts.init(document.getElementById(this.chartId))
    this.getCurChartConfig()
  },
  destroyed() {
    this.chart.dispose()
    this.chart = null
  }
}
</script>

<style lang="scss" scoped>
// .chart {
//   background-color: #fff;
// }
</style>